<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<title>xuluo</title>
	<style type="text/css">
		li{border-bottom: 1px solid #ccc;text-align: center;padding: 10px 0;}
	</style>
</head>
<body style="height: 1000px">
	<ul id="ul">
		<li>1111111111</li>
		<li>2222222222</li>
		<li>3333333333</li>
		<li>3333333333</li>
		<li>3333333333</li>
		<li>3333333333</li>
		<li>3333333333</li>
		<li>3333333333</li>
		<li>3333333333</li>
		<li>3333333333</li>
		<li>3333333333</li>
	</ul>
	<script type="text/javascript">
		;(function(w,d){
			var dom = d.createElement('div');
			dom.className = 'scrollMove';
			dom.style.cssText = 'position: fixed; left: 0px; top: 0px; height: 7px; background: #f00808; z-index: 999999;box-shadow: 0px 0px 3px #999;width: 0;transition:width 0.3s ease-out;-moz-transition:width 0.3s ease-out;-webkit-transition:width 0.3s ease-out;'
			d.body.appendChild(dom);
			w.addEventListener('scroll',function(){
				dom.style.width = Math.round((pageYOffset  / (d.body.offsetHeight - d.documentElement.clientHeight)) * 100) +'%';
			},false);
		})(window,document);
	</script>
</body>
</html>